<template>
  <el-dialog
    :visible.sync="visible"
    title="编目详情"
    width="1000px"
    :close-on-click-modal="false"
    class="zybm-detail-dialog"
    @close="handleClose"
  >
    <!-- 表单容器：统一包裹所有模块，确保样式一致性 -->
    <el-form class="detail-form" :label-position="labelPosition">
      <!-- 1. 基本信息区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-info-circle section-icon" />
          <div class="section-title">基本信息</div>
        </div>
        <!-- 采用2列布局：将字段分组，减少纵向长度，更规整 -->
        <el-row :gutter="24" class="section-content">
          <!-- 第一列 -->
          <el-col :span="12">
            <el-form-item label="信息资源分类：" class="detail-form-item">
              <div class="form-content">
                <div
                  v-for="(node, index) in formData.dataNodes"
                  :key="index"
                  class="tag-item"
                >
                  {{ node }}
                </div>
                <!-- 空状态提示 -->
                <div v-if="formData.dataNodes.length === 0" class="empty-tip">未选择</div>
              </div>
            </el-form-item>

            <el-form-item label="编目名称：" class="detail-form-item">
              <div class="form-content">{{ formData.catalogName || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="信息资源提供方：" class="detail-form-item">
              <div class="form-content">{{ formData.dataSource || '未选择' }}</div>
            </el-form-item>

            <el-form-item label="更新周期：" class="detail-form-item">
              <div class="form-content">{{ formData.updateCycle || '未选择' }}</div>
            </el-form-item>

            <el-form-item label="数据量（条数）：" class="detail-form-item">
              <div class="form-content">{{ formData.dataVolume || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据所在层级：" class="detail-form-item">
              <div class="form-content">{{ formData.dataLevel || '未选择' }}</div>
            </el-form-item>
          </el-col>

          <!-- 第二列 -->
          <el-col :span="12">
            <el-form-item label="信息资源摘要：" class="detail-form-item">
              <div class="form-content">{{ formData.catalogDescription || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据分级：" class="detail-form-item">
              <!-- 给数据分级加标签样式，突出重要性 -->
              <div class="form-content">
                <el-tag
                  :type="formData.dataClassification === '核心数据' ? 'danger' : formData.dataClassification === '重要数据' ? 'warning' : 'info'"
                  size="mini"
                >
                  {{ formData.dataClassification || '未选择' }}
                </el-tag>
              </div>
            </el-form-item>

            <el-form-item label="数据时间范围：" class="detail-form-item">
              <div class="form-content">
                {{ (formData.dataBeginTime || '未选择') + ' - ' + (formData.dataEndTime || '未选择') }}
              </div>
            </el-form-item>

            <el-form-item label="政务数据提供方：" class="detail-form-item">
              <div class="form-content">{{ formData.governmentDataProvider || '沧州市数据局' }}</div>
            </el-form-item>

            <el-form-item label="是否向社会开放：" class="detail-form-item">
              <!-- 用图标+文本增强视觉区分 -->
              <div class="form-content">
                <span class="status-text">
                  {{ formData.isPublic === '0' ? '是' : formData.isPublic === '1' ? '否' : '未选择' }}
                </span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 2. 共享信息区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-share-alt section-icon" />
          <div class="section-title">共享信息</div>
        </div>
        <el-row :gutter="24" class="section-content">
          <el-col :span="12">
            <el-form-item label="共享类型：" class="detail-form-item">
              <div class="form-content">
                <el-tag
                  :type="formData.sharedType === '无条件共享' ? 'success' :
                    formData.sharedType === '有条件共享' ? 'primary' : 'default'"
                >
                  {{ formData.sharedType || '未选择' }}
                </el-tag>
              </div>
            </el-form-item>

            <!-- 共享条件：仅在“有条件共享”时显示，加背景色突出 -->
            <el-form-item
              v-if="formData.sharedType === '有条件共享'"
              label="共享条件："
              class="detail-form-item"
            >
              <div class="form-content condition-content">
                {{ formData.sharedCondition || '无特殊条件' }}
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="共享方式：" class="detail-form-item">
              <div class="form-content">
                {{ formData.shardWay === '0' ? 'API接口' : formData.shardWay === '1' ? '文件' : '未选择' }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 3. 数据项区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-table section-icon" />
          <div class="section-title">数据项详情</div>
        </div>
        <div class="section-content">
          <!-- 表格加边框、 hover 效果，提升可读性 -->
          <el-table
            :data="formData.dataItems"
            style="width: 100%;"
            border
            stripe
            :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
            :empty-text="formData.dataItems.length === 0 ? '暂无数据项' : ''"
          >
            <el-table-column prop="itemName" label="数据项名称" width="180" />
            <el-table-column prop="itemEnglishName" label="数据项英文名" />
            <el-table-column prop="dataTypeLabel" label="数据类型" />
            <el-table-column prop="dataLength" label="数据长度" align="center" />
            <el-table-column prop="isDictLabel" label="是否有字典项" align="center" />
            <!-- <el-table-column prop="sharedTypeLabel" label="共享类型" align="center" /> -->
            <el-table-column
              prop="isRequiredLabel"
              label="是否必填"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.isRequiredLabel === '是' ? 'success' : 'info'">
                  {{ scope.row.isRequiredLabel }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>

    <!-- 底部按钮：居中显示，增加点击区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        style="width: 120px;"
        @click="visible = false"
      >
        关闭
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DetailsDialog',
  data() {
    return {
      visible: false,
      detailData: null,
      labelPosition: 'right',
      // 1. 初始化formData，包含所有需要渲染的模块字段
      formData: {
        // 基本信息模块
        dataNodes: [], // 信息资源分类（数组，存显示文本）
        catalogName: '', // 编目名称
        dataSource: '', // 信息资源提供方
        catalogDescription: '', // 信息资源摘要
        updateCycle: '', // 更新周期
        dataClassification: '', // 数据分级
        dataVolume: '', // 数据量（条数）
        dataBeginTime: '', // 数据开始年份
        dataEndTime: '', // 数据结束年份
        governmentDataProvider: '', // 政务数据提供方
        dataLevel: '', // 数据所在层级
        // 共享信息模块
        sharedType: '', // 共享类型（文本，如“无条件共享”）
        sharedCondition: '', // 共享条件（仅共享类型为“有条件”时显示）
        isPublic: '', // 是否向社会开放（文本，如“是”）
        shardWay: '', // 共享方式（数组，存显示文本，如“数据库”）
        // 数据项模块
        dataItems: []
      },
      // 2. 定义映射表（复用zybmInfo的逻辑，确保显示文本一致）
      dataTypeMap: {
        '0': '字符串型', '1': '数值型N', '2': '货币型Y', '3': '日期型D',
        '4': '日期时间型T', '5': '逻辑型L', '6': '备注型M', '7': '通用型G',
        '8': '双精度型B', '9': '整型I', '10': '浮点型F', '11': '二进制blob', '12': '长文本text'
      },
      isDictMap: { '0': '是', '1': '否' },
      sharedTypeMap: { '0': '无条件共享', '1': '有条件共享', '2': '不予共享' },
      isRequiredMap: { '0': '是', '1': '否' },
      sharedWayMap: { '0': 'API服务', '1': '文件' },
      dataLevelMap: { '0': '国家级', '1': '省级', '2': '市级', '3': '县区级' },
      updateCycleMap: { '0': '实时', '1': '每天', '2': '每周', '3': '每月', '4': '每季度', '5': '每半年', '6': '每年', 7: '其他' },
      dataClassificationMap: { '0': '一般数据', '1': '重要数据', '2': '核心数据' }
    }
  },
  methods: {
    handleClose() {
      this.detailData = null
      // 关闭时重置formData，避免下次打开残留旧数据
      this.formData = {
        dataNodes: [],
        catalogName: '',
        dataSource: '',
        catalogDescription: '',
        updateCycle: '',
        dataClassification: '',
        dataVolume: '',
        dataBeginTime: '',
        dataEndTime: '',
        governmentDataProvider: '',
        dataLevel: '',
        sharedType: '',
        sharedCondition: '',
        isPublic: '',
        shardWay: '',
        dataItems: []
      }
    },
    setDetailData(data) {
      this.detailData = data
      console.log('后端返回的编目详情数据：', data)

      // 1. 处理基本信息模块：编码转文本、数组提取显示值
      const formattedFormData = {
        // 信息资源分类：从对象数组中提取label/name
        dataNodes: (data.dataNodes || []).map(node => node.label || node.name || '未知分类'),
        // 编目名称
        catalogName: data.catalogName || '',
        // 信息资源提供方：后端可能返回对象（含id/name），提取name
        dataSource: data.dataSource?.name || data.dataSource || '',
        // 信息资源摘要
        catalogDescription: data.catalogDescription || '',
        // 更新周期：编码转文本
        updateCycle: this.updateCycleMap[data.updateCycle?.toString()] || data.updateCycle || '',
        // 数据分级：编码转文本
        dataClassification: this.dataClassificationMap[data.dataClassification?.toString()] || data.dataClassification || '',
        // 数据量
        dataVolume: data.dataVolume || '',
        // 数据时间范围
        dataBeginTime: data.dataBeginTime || '',
        dataEndTime: data.dataEndTime || '',
        // 政务数据提供方
        governmentDataProvider: data.governmentDataProvider || '沧州市数据局',
        // 数据所在层级：编码转文本
        dataLevel: this.dataLevelMap[data.dataLevel?.toString()] || data.dataLevel || '',

        // 2. 处理共享信息模块
        sharedType: this.sharedTypeMap[data.sharedType?.toString()] || data.sharedType || '',
        sharedCondition: data.sharedCondition || '',
        // 是否向社会开放：编码转文本
        isPublic: data.isPublic != null ? data.isPublic.toString() : '',
        // 共享方式：从对象数组中提取编码→转文本
        shardWay: data.shardWay != null ? data.shardWay.toString() : '',

        // 3. 处理数据项模块
        dataItems: (data.catalogItems || []).map(item => ({
          ...item,
          dataTypeLabel: this.dataTypeMap[item.dataType?.toString()] || '未知类型',
          isDictLabel: this.isDictMap[item.isDict?.toString()] || '未知',
          sharedTypeLabel: this.sharedTypeMap[item.sharedType?.toString()] || '未知',
          isRequiredLabel: this.isRequiredMap[item.isRequired?.toString()] || '未知'
        }))
      }

      this.formData = formattedFormData
      this.visible = true
    }
  }
}
</script>

<style scoped>
/* 弹窗整体样式 */
.zybm-detail-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px;
    background-color: #fafafa;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }
}

/* 模块卡片样式：统一圆角、阴影、间距 */
.section-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}

.section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 模块标题栏：图标+文本+分割线，增强视觉层次 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-icon {
  color: #409EFF;
  font-size: 18px;
  margin-right: 8px;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
}

/* 模块内容区：统一内边距 */
.section-content {
  padding: 0 4px;
}

/* 表单项样式：统一标签宽度、间距 */
.detail-form-item {
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;

  ::v-deep .el-form-item__label {
    width: 120px !important;
    text-align: right !important;
    font-size: 14px;
    color: #606266;
    padding-right: 12px;
  }

  ::v-deep .el-form-item__content {
    font-size: 14px;
    color: #303133;
    line-height: 24px;
  }
}

/* 表单内容区：空状态、标签项样式 */
.form-content {
  padding: 2px 0;
}

.empty-tip {
  color: #909399;
  font-size: 13px;
}

.tag-item {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 6px;
}

.way-item {
  display: inline-flex;
  align-items: center;
  background-color: #f0f9eb;
  color: #67C23A;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.way-item i {
  margin-right: 4px;
  font-size: 12px;
}

/* 共享条件特殊样式 */
.condition-content {
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 0px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* 状态文本样式 */
.status-text {
  margin-left: 6px;
}

/* 底部按钮区域 */
.dialog-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
</style>
